<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖动按钮控制图片列表滚动_Download by http://www.codefans.net</title>
<style>
/* Reset&Clearfix */
*{margin:0;padding:0;}
img{border:0;}
ul,li{list-style:none;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-block;}
/*\*/ .clearfix{display:block;} /**/
body{background:#FFF;color:#333;font:12px/1.6em Helvetica,Arial,sans-serif;}
a{color:#0287CA;text-decoration:none;}
a:hover{text-decoration:underline;}

/* 关键样式 */
.drag{ 
	width:285px;
	margin:30px auto;
	padding-bottom:5px; 
	border:1px solid #D7D7D7; 
	background:#F1F1F1; 
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-khtml-border-radius:5px;
}
.drag .wrap {
	height:105px;
	padding:0 10px;
}
.drag .drag_cont { 
	position:relative;
	width:265px; 
	height:95px;
	background:#FFF;
	-moz-border-radius:5px;
	-webkit-border-radius:5px; 
	-khtml-border-radius:5px;
}
.drag ul.drag_ul { 
	height:95px; 
	width:890px;
	position:absolute;
	left:0;
	top:0;
}
.drag ul.drag_ul li { 
	display:inline; 
	float:left;
	width:75px; 
	height:75px;
	margin:10px 0 0 10px;
}
.drag ul.drag_ul li a {
	display:block;
}
.drag ul.drag_ul li a img {
	width:75px;
	height:75px;
}
.drag .drag_cont_btn {
	width:245px;
	margin:6px auto; 
	position:relative;
	border-bottom:1px solid #D7D7D7; 
	height:auto;
}
</style>
<link rel="stylesheet" type="text/css" href="jqueryui/css/jquery-ui-1.7.2.custom.css" />
<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryui/js/ui.core.js"></script>
<script type="text/javascript" src="jqueryui/js/ui.slider.js"></script>
<script type="text/javascript">
$(function() {
	$(".drag_cont_btn").slider();
});
</script>
</head>
<body>

<div id="drag" class="drag">
	<div class="wrap">
		<div class="drag_cont">
			<ul class="drag_ul clearfix">
				<li><a href="#" title="第1张"><img src="img/1.jpg" alt="第1张" /></a></li>
				<li><a href="#" title="第2张"><img src="img/2.jpg" alt="第2张" /></a></li>
				<li><a href="#" title="第3张"><img src="img/3.jpg" alt="第3张" /></a></li>
				<li><a href="#" title="第4张"><img src="img/4.jpg" alt="第4张" /></a></li>
				<li><a href="#" title="第5张"><img src="img/5.jpg" alt="第5张" /></a></li>
				<li><a href="#" title="第6张"><img src="img/6.jpg" alt="第6张" /></a></li>
				<li><a href="#" title="第7张"><img src="img/7.jpg" alt="第7张" /></a></li>
				<li><a href="#" title="第8张"><img src="img/8.jpg" alt="第8张" /></a></li>
				<li><a href="#" title="最后1张"><img src="img/9.jpg" alt="最后1张" /></a></li>
			</ul>
		</div>
	</div>
	<div class="drag_cont_btn"></div>
</div>
<!--
   ┏━━━━━━━━━━━━━━━━━━━━━┓
   ┃             源 码 爱 好 者               ┃
   ┣━━━━━━━━━━━━━━━━━━━━━┫
   ┃                                          ┃
   ┃           提供源码发布与下载             ┃
   ┃                                          ┃
   ┃        http://www.codefans.net           ┃
   ┃                                          ┃
   ┃            互助、分享、提高              ┃
   ┗━━━━━━━━━━━━━━━━━━━━━┛
-->
</body>
</html>
